<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 本框架基本脚本和样式 -->
<script type="text/javascript"
	src="${path }/resource/js/plugin/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/systools/MBase.js"></script>
	<style>
	.fontcolor {
		color: #4d6fd6;
	}
	.inputtext {
	    background: aliceblue;
	}
</style>
<style type="text/css">
    
    #img_up .img_div{
      position: relative;
        width: 150px;
        height: 150px;
        display: inline-block;
    }
    #img_up .img_div img{
      width: 100%;
        height: 100%;
    
    }
    
    #img_up .img_div .deletimg{
      position: absolute;
        top: 5px;
        right: 5px;
        cursor: pointer;
     /*  color:#000; */
    }
    #img_up .img_div .leftPath{
       font-size: 25px;
    position: absolute;
    font-weight: bold;
    right: 120px;
    bottom: -15px;
    }
      #img_up .img_div .rightPath{
        font-size: 25px;
    position: absolute;
    font-weight: bold;
    left: 120px;
    bottom: -15px;
    }
  </style>
</head>
<body>
<div class="ibox-content" id="app">
	<input type="hidden" name="id" id="sid" >
	<div class="panel panel-primary">
		<div class="panel-heading">
			<h3 class="panel-title">基本信息</h3>
		</div>
		
		 <div id="addInfo" style="display:none">
		<div class="panel-body">
		<form class="form-horizontal" id="dataform" onsubmit="javascripr:return false;">
				
				<div class="form-group">
					<label class="col-sm-2 control-label">店铺名称
					<span class="text-danger">*</span>
					</label>
					<div class="col-sm-4">
						<input type="text" class="form-control name" name="name" 
						maxLength="50" dataType="*1-50" v-model="obj.name" nullmsg="名称不能为空">
					</div>
					
				</div>
	<div class="form-group">
        <label class="col-sm-2 control-label">店铺简介<span class="text-danger">*</span></label>
      <div class="col-sm-8" id="img_up">  
        <div class="img">
          <input  v-model="obj.introduce"  name="introduce" id="introduce" class="input-text upload-url radius form-control inpImg" 
                   type="hidden"  readonly style="width:65%;display: inline;"  /> 
                     <a class="btn btn-primary radius upload-a" style="width:15%;display: block;" >
                   <i class="fa fa-cloud-upload"></i></a>
        </div>
      </div>
      <div class="cl"></div>
    </div>
				
				<div class="form-group">
					<label class="col-sm-2 control-label">店铺地址
					</label>
					<div class="col-sm-4">
						<input type="text" class="form-control location" name="location" 
								maxLength="50" dataType="*1-50"  v-model="obj.location" nullmsg="店铺地址不能为空">
					</div>
				</div>
				
		<div class="form-group">
			<label class="col-sm-2 control-label">经纬度<span class="text-danger">*</span></label>
			<div class="col-sm-2" style="width:140px">
				<input type="text" dataType="/^\d+(\.\d+)?$/" class="form-control longitude" maxlength="20" errormsg="最多20位的浮点数"
					v-model="obj.longitude"  name="longitude" id="siteLongitude" nullmsg="经度不能为空">
			</div>
			<div class="col-sm-2" style="width:140px">
				<input type="text" dataType="/^\d+(\.\d+)?$/" class="form-control latitude" maxlength="20" errormsg="最多20位的浮点数"
					v-model="obj.latitude"  name="latitude" id="siteLatitude" nullmsg="纬度不能为空" >
			</div>
			<div class="col-sm-2" style="width:80px">
			<button onclick="openMap()" type="button" 
					class="btn btn-info btn-sm"><i class="fa fa-search "></i>地图选取
			</button>	
			</div>
			
			</div>
		
			
				<div class="form-group ">
					<div class="col-sm-12 text-center">
						<a href="javascript:;" onclick="submitData()"
							class="btn btn-success radius"><i class="fa fa-check"></i>  保存</a>
					</div>
				</div>
			</form>
			</div>
		</div>

		
	<div id="selectInfo" style="display:none">
		<div class="panel-body">
		<form class="form-horizontal"  onsubmit="javascripr:return false;">
				<div class="form-group">
					<label class="col-sm-2 control-label">店铺名称
					
					</label>
					<div class="col-sm-4">
					      <p class="form-control-static name">{{obj.name}}</p>
					</div>
					
				</div>
				
			<div class="form-group">
					<label class="col-sm-2 control-label">店铺简介</label>
					<div class="col-sm-8" >
					<div v-for="(item, index)  in imgs" style="float: left;">
						<img width='150px;' height='150px;'   class='loadingbig img' :src='item' />
						</div>
					</div>
					
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">店铺地址
					
					</label>
					<div class="col-sm-4">
						<p class="form-control-static location">{{obj.location}}</p>
					</div>
				</div>
					<div class="form-group">
					<label class="col-sm-2 control-label">经纬度
					</label>
					<div class="col-sm-4">
						<p class="form-control-static longitude">{{obj.longitude}}</p>
						<p class="form-control-static latitude">{{obj.latitude}}</p>
					</div>
				</div>
				<div class="form-group ">
					<div class="col-sm-12 text-center">
						<a href="javascript:;" onclick="updateInfo()"
							class="btn btn-success radius"><i class="fa fa-check"></i> 修改</a>&nbsp;&nbsp;&nbsp;&nbsp; 
					</div>
				</div>
			</form>
			</div>
		</div> 
</div>
</div>
<script type="text/javascript" src="${path }/resource/js/systools/MJsBase.js"></script>
<script type="text/javascript" src="${path }/resource/js/systools/vue.js"></script>
<script type="text/javascript">
var info={
		name:"",
		introduce:"",
		location:"",
		longitude:"",
		latitude:""
		}
	var invokeUrl="${path}/do/admin/dataDictionary/modifyInfo";
	var myForm=MForm.initForm({
		invokeUrl:invokeUrl,
		afterSubmit:function(){
			refu();
		},
	});
	var vm=new Vue({
	    el:"#app",
	    data:{
	    	 obj:info,
	    	 imgs:[]
	    },  mounted:function(){
	    	this.init();
	    },   methods:{
	        init:function(){
	        	  var _this=this;
	        	$.AjaxProxy(
						{
							p : null
						}).invoke(
						"${path}/do/admin/dataDictionary/findByType/company_info",
						function(loj) {
							var rows=loj.getValue("rows");
							$('#addInfo').hide();
							$('#selectInfo').show();
    						if(rows){
    							var data=rows[0]
    							if(data.extValue){
    								_this.obj=JSON.parse(data.extValue);
    								var imgpaths=_this.obj.introduce.split(",");
    								_this.imgs=imgpaths;
    							}
    				        
    							$('#sid').val(data.id)
    						}
							
						})
	        }
	    }
	})
/* 	$(function() {
		console.log($('.inpImg').val())
		MUI.initImgUpload1(".inpImg");
	
	}); */
	//修改基本资料
	function updateInfo(){
		$('#addInfo').show();
		$('#selectInfo').hide();
		MUI.initImgUpload1(".inpImg");
	}

	function submitData(){
		var validform= MValidform.validform("#dataform")
		var result=validform.check();
		if(!result){
			return;
		}
		var data=$("#dataform").serializeFormJSON();
		var index=layer.load(2, {
			time : 100 * 1000,
			shade : [ 0.4, '#aeaeae' ]
		});
		 $.ajax({
              url:invokeUrl,
              type:"post",
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              data:JSON.stringify({id:$('#sid').val(),extValue:JSON.stringify(data)}),
              success:function (res) {
            	  if(res.status=='200'){
            		  layer.msg('操作成功!', {
            				icon : 1,time:3000
            			});
            		  layer.close(index)
            		  $('#addInfo').hide();
            			$('#selectInfo').show();
            			location.reload();
            	  }else{
            		  layer.msg('操作失败!', {
          				icon : 2,time:3000
          			});
            		  layer.close(index)
            	  }
            	
              }
		 })
	}
	
	function openMap() {
		layer.full(
			layer.open({
				type : 2,
				title : "选取经纬度",
				area : [ MUI.SIZE_L, '400px' ],
				maxmin : true,
				content : [ '${path}/do/admin/dataDictionary/selectMap']
			})
		);
		 
	}

//通过地图获取经度纬度
function addLngLat(lng,lat) {
	vm.obj.longitude=lng
	$("#siteLongitude").blur();
	vm.obj.latitude=lat
	$("#siteLatitude").blur();
	
}
</script>
</body>


</html>